<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="description" content="Ejemplos sobre Remote.Asset.js de Mootools"/>
	<meta name="keywords" content="tutorial, ejemplos, asset, precargar, insertar, imagenes, css, js, javascript"/>
	<title>Assets.js</title>
	<script type="text/javascript" src="scriptaplicacion/mootools-core-1.3.2.js"></script>
	<script type="text/javascript" src="scriptaplicacion/mootools-more-1.3.2.1.js"></script>

	<link href="ejemplos-base.css" rel="stylesheet" type="text/css" media="screen" />
	
</head>
<body>
<h2>Asset.javascript</h2>
<pre class="javascript" style="color: #000066; border: 1px solid #d0d0d0;"><ol><li class="li1"><div class="de1">$<span class="br0">(</span><span class="st0">'uno'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw2">function</span><span class="br0">(</span>ev<span class="br0">)</span></div></li><li class="li1"><div class="de1"><span class="br0">{</span></div></li><li class="li1"><div class="de1">	<span class="kw2">new</span> Event<span class="br0">(</span>ev<span class="br0">)</span>.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1">	<span class="co1">//Insertamos script.js</span></div></li><li class="li2"><div class="de2">	<span class="kw2">new</span> Asset.<span class="me1">javascript</span><span class="br0">(</span><span class="st0">'script.js'</span>, <span class="br0">{</span>id: <span class="st0">'unId'</span><span class="br0">}</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1">	<span class="co1">//opcionalmente podemos agregar algunos atributos, en este caso agregamos id.</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span>; </div></li></ol></pre>
<pre class="javascript" style="color: #000066; border: 1px solid #d0d0d0;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/*script.js*/</span></div></li><li class="li1"><div class="de1">$<span class="br0">(</span><span class="st0">'contenedor1'</span><span class="br0">)</span>.<span class="me1">appendText</span><span class="br0">(</span><span class="st0">'Formo parte de script.js!'</span><span class="br0">)</span>; </div></li></ol></pre>
<a href="#" id="uno" class="enviar">Click para probar</a>
<div id="contenedor1" class="prueba"></div>

<h2>Asset.css</h2>
<pre class="javascript" style="color: #000066; border: 1px solid #d0d0d0;"><ol><li class="li1"><div class="de1">$<span class="br0">(</span><span class="st0">'estilo-1'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw2">function</span><span class="br0">(</span>ev<span class="br0">)</span></div></li><li class="li1"><div class="de1"><span class="br0">{</span></div></li><li class="li1"><div class="de1">	<span class="kw2">new</span> Event<span class="br0">(</span>ev<span class="br0">)</span>.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1">	<span class="co1">//Insertamos estilo1.css</span></div></li><li class="li2"><div class="de2">	<span class="kw2">new</span> Asset.<span class="me1">css</span><span class="br0">(</span><span class="st0">'estilo1.css'</span>, <span class="br0">{</span>id: <span class="st0">'unId'</span><span class="br0">}</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1">	<span class="co1">//opcionalmente podemos agregar algunos atributos para el objeto link, en este caso agregamos id.</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1">$<span class="br0">(</span><span class="st0">'estilo-2'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw2">function</span><span class="br0">(</span>ev<span class="br0">)</span></div></li><li class="li1"><div class="de1"><span class="br0">{</span></div></li><li class="li2"><div class="de2">	<span class="kw2">new</span> Event<span class="br0">(</span>ev<span class="br0">)</span>.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1">	<span class="kw2">new</span> Asset.<span class="me1">css</span><span class="br0">(</span><span class="st0">'estilo2.css'</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span>;</div></li><li class="li1"> </li></ol></pre>
<pre class="css" style="color: #000066; border: 1px solid #d0d0d0;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/*estilo 1*/</span></div></li><li class="li1"><div class="de1"><span class="re1">.estilos </span><span class="br0">{</span></div></li><li class="li1"><div class="de1">	<span class="kw1">background-color</span>: #ffffff;</div></li><li class="li1"><div class="de1">	<span class="kw1">color</span>: #B4C24B;</div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="coMULTI">/*estilo 2*/</span></div></li><li class="li1"><div class="de1"><span class="re1">.estilos </span><span class="br0">{</span></div></li><li class="li1"><div class="de1">	<span class="kw1">background-color</span>: #CC0000;</div></li><li class="li2"><div class="de2">	<span class="kw1">color</span>: #ffffff;</div></li><li class="li1"><div class="de1"><span class="br0">}</span> </div></li></ol></pre>
<a href="#" id="estilo-1" class="enviar">Estilo 1</a>
<a href="#" id="estilo-2" class="enviar">Estilo 2</a>
<div class="estilos">Jourmoly</div>

<h2>Asset.image</h2>
<pre class="javascript" style="color: #000066; border: 1px solid #d0d0d0;"><ol><li class="li1"><div class="de1">$<span class="br0">(</span><span class="st0">'tres'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw2">function</span><span class="br0">(</span>ev<span class="br0">)</span></div></li><li class="li1"><div class="de1"><span class="br0">{</span></div></li><li class="li1"><div class="de1">	<span class="kw2">new</span> Event<span class="br0">(</span>ev<span class="br0">)</span>.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1">	<span class="co1">//pre-cargamos mootools.jpg, al igual que con css y javascript</span></div></li><li class="li2"><div class="de2">	<span class="co1">//podemos agregar algunos atributos para nuestro nuevo objeto.</span></div></li><li class="li1"><div class="de1">	<span class="kw2">var</span> imagen = <span class="kw2">new</span> Asset.<span class="me1">image</span><span class="br0">(</span><span class="st0">'mootools.jpg'</span>, <span class="br0">{</span><span class="st0">'class'</span>: <span class="st0">'imagenes'</span><span class="br0">}</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1">	<span class="co1">//una vez que se carg&oacute; la imagen, se insertar&aacute; dentro de contenedor3</span></div></li><li class="li1"><div class="de1">	$<span class="br0">(</span><span class="st0">'contenedor3'</span><span class="br0">)</span>.<span class="me1">adopt</span><span class="br0">(</span>imagen<span class="br0">)</span>;</div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span>; </div></li></ol></pre>
<a href="#" id="tres" class="enviar">Click para probar</a>
<div id="contenedor3" class="prueba"></div>

<h2>Asset.images</h2>
<pre class="javascript" style="color: #000066; border: 1px solid #d0d0d0;"><ol><li class="li1"><div class="de1">$<span class="br0">(</span><span class="st0">'cuatro'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw2">function</span><span class="br0">(</span>ev<span class="br0">)</span></div></li><li class="li1"><div class="de1"><span class="br0">{</span></div></li><li class="li1"><div class="de1">	<span class="kw2">new</span> Event<span class="br0">(</span>ev<span class="br0">)</span>.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1">	$<span class="br0">(</span><span class="st0">'contenedor4'</span><span class="br0">)</span>.<span class="me1">empty</span><span class="br0">(</span><span class="br0">)</span>;</div></li><li class="li2"><div class="de2">	<span class="co1">//Precargamos un arreglo de imagenes</span></div></li><li class="li1"><div class="de1">	<span class="kw2">var</span> aCargar = <span class="br0">[</span><span class="st0">'mootools1.jpg'</span>, <span class="st0">'mootools2.jpg'</span>, <span class="st0">'mootools3.jpg'</span>, <span class="st0">'mootools4.jpg'</span>, <span class="st0">'mootools5.jpg'</span><span class="br0">]</span>;</div></li><li class="li1"><div class="de1">	<span class="kw2">var</span> imagenes = <span class="kw2">new</span> Asset.<span class="me1">images</span><span class="br0">(</span>aCargar,</div></li><li class="li1"><div class="de1">	<span class="br0">{</span></div></li><li class="li1"><div class="de1">		<span class="co1">//cada vez que una imagen es cargada se ejecuta la funcion que definimos en el evento onProgress</span></div></li><li class="li2"><div class="de2">		onProgress: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span></div></li><li class="li1"><div class="de1">		<span class="br0">{</span></div></li><li class="li1"><div class="de1">			<span class="co1">//en este caso, this es un objeto imagen</span></div></li><li class="li1"><div class="de1">			$<span class="br0">(</span><span class="st0">'contenedor4'</span><span class="br0">)</span>.<span class="me1">adopt</span><span class="br0">(</span><span class="kw1">this</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1">		<span class="br0">}</span></div></li><li class="li2"><div class="de2">	<span class="br0">}</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span>; </div></li></ol></pre>
<a href="#" id="cuatro" class="enviar">Click para probar</a>
<div id="contenedor4" class="prueba2"></div>

<pre class="javascript" style="color: #000066; border: 1px solid #d0d0d0;"><ol><li class="li1"><div class="de1">$<span class="br0">(</span><span class="st0">'cinco'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw2">function</span><span class="br0">(</span>ev<span class="br0">)</span></div></li><li class="li1"><div class="de1"><span class="br0">{</span></div></li><li class="li1"><div class="de1">	<span class="kw2">new</span> Event<span class="br0">(</span>ev<span class="br0">)</span>.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1">	$<span class="br0">(</span><span class="st0">'contenedor5'</span><span class="br0">)</span>.<span class="me1">empty</span><span class="br0">(</span><span class="br0">)</span>;</div></li><li class="li2"><div class="de2">	<span class="kw2">var</span> aCargar = <span class="br0">[</span><span class="st0">'mootools1.jpg'</span>, <span class="st0">'mootools2.jpg'</span>, <span class="st0">'mootools3.jpg'</span>, <span class="st0">'mootools4.jpg'</span>, <span class="st0">'mootools5.jpg'</span><span class="br0">]</span>;</div></li><li class="li1"><div class="de1">	<span class="kw2">var</span> imagenes = <span class="kw2">new</span> Asset.<span class="me1">images</span><span class="br0">(</span>aCargar,</div></li><li class="li1"><div class="de1">	<span class="br0">{</span></div></li><li class="li1"><div class="de1">		<span class="co1">//cuando todas las imagenes fueron cargadas se ejecuta onComplete</span></div></li><li class="li1"><div class="de1">		onComplete: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span></div></li><li class="li2"><div class="de2">		<span class="br0">{</span></div></li><li class="li1"><div class="de1">			<span class="co1">//insertamos las imagenes una a una</span></div></li><li class="li1"><div class="de1">			imagenes.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span>el<span class="br0">)</span></div></li><li class="li1"><div class="de1">			<span class="br0">{</span></div></li><li class="li1"><div class="de1">				$<span class="br0">(</span><span class="st0">'contenedor5'</span><span class="br0">)</span>.<span class="me1">adopt</span><span class="br0">(</span>el<span class="br0">)</span>;</div></li><li class="li2"><div class="de2">			<span class="br0">}</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1">		<span class="br0">}</span></div></li><li class="li1"><div class="de1">	<span class="br0">}</span><span class="br0">)</span>;</div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span>; </div></li></ol></pre>
<a href="#" id="cinco" class="enviar">Click para probar</a>
<div id="contenedor5" class="prueba2"></div>

<p>
<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.es_AR"><img src="http://www.jourmoly.com.ar/wp-content/themes/simpla/images/licencia-80x15.png" border="0" /></a>
</p>
</div>
<script type="text/javascript">
window.addEvent('domready', function()
{
	$('uno').addEvent('click', function(ev)
	{
		new Event(ev).stop();
		//Insertamos script.js
		new Asset.javascript('script.js', {tag: 'unTag'});
		//opcionalmente podemos agregar algunos atributos para el objeto script, en este caso agregamos id.
	});
	$('estilo-1').addEvent('click', function(ev)
	{
		new Event(ev).stop();
		//Insertamos estilo1.css
		new Asset.css('estilo1.css', {tag: 'unTag'});
		//opcionalmente podemos agregar algunos atributos para el objeto link, en este caso agregamos id.
	});
	$('estilo-2').addEvent('click', function(ev)
	{
		new Event(ev).stop();
		new Asset.css('estilo2.css');
	});
	$('tres').addEvent('click', function(ev)
	{
		new Event(ev).stop();
		//pre-cargamos mootools.jpg, al igual que con css y javascript
		//podemos agregar algunos atributos para nuestro nuevo objeto.
		var imagen = new Asset.image('mootools.jpg', {tag: 'unTag'});
		//una vez que se carg&oacute; la imagen, se insertar&aacute; dentro de contenedor3
		$('contenedor3').adopt(imagen);
	});
	$('cuatro').addEvent('click', function(ev)
	{
		new Event(ev).stop();
		$('contenedor4').empty();
		//Precargamos un arreglo de imagenes
		var aCargar = ['mootools1.jpg', 'mootools2.jpg', 'mootools3.jpg', 'mootools4.jpg', 'mootools5.jpg'];
		var imagenes = new Asset.images(aCargar,
		{
			//cada vez que una imagen es cargada se ejecuta la funcion que definimos en el evento onProgress
			onProgress: function()
			{
				//en este caso, this es un objeto imagen
				$('contenedor4').adopt(this);
			}
		});
	});
	$('cinco').addEvent('click', function(ev)
	{
		new Event(ev).stop();
		$('contenedor5').empty();
		var aCargar = ['mootools1.jpg', 'mootools2.jpg', 'mootools3.jpg', 'mootools4.jpg', 'mootools5.jpg'];
		var imagenes = new Asset.images(aCargar,
		{
			//cuando todas las imagenes fueron cargadas se ejecuta onComplete
			onComplete: function()
			{
				//insertamos las imagenes una a una
				imagenes.each(function(el)
				{
					$('contenedor5').adopt(el);
				});
			}
		});
	});
});
</script>
</body>
</html>